<template>
  <div class="login-wrap">
    <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm login-container">
      <h3 class="title">用户登录</h3>
      <el-form-item prop="userName">
        <el-input type="text" v-model="ruleForm.userName" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="submitForm(ruleForm)" :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>

    <!-- 实验室列表 -->
    <el-dialog title="实验室列表" :visible.sync="detailVisible" width="40%" @click='closeDialog()'>
      <el-button size="small" type="primary" style="margin-bottom: 20px;" @click="creatshiyanshi()">创建实验室</el-button>
      <el-table size="small" :data="datalist" highlight-current-row border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column align="center" sortable prop="name" label="实验室名称" width="200">
        </el-table-column>
        <el-table-column align="center" sortable prop="intro" label="简介" width="200">
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="150">
          <template slot-scope="scope">
            <el-button size="primary" @click="handleEdit(scope.$index, scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
       <!-- 分页组件 -->
       <el-pagination class="page-box" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="pageparm.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageparm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageparm.total">
      </el-pagination>
    </el-dialog>

    <!-- 创建实验室 -->
    <el-dialog title="创建实验室" :visible.sync="addVisible" width="40%" @click='closeShiyanshi()'>
      <el-form label-width="100px" :model="addData">
        <el-form-item label="实验室名称" prop="name">
          <el-input size="small" v-model="addData.name" auto-complete="off" placeholder="请输入实验室名称"></el-input>
        </el-form-item>
        <el-form-item label="实验室简介" prop="intro">
          <el-input size="small" v-model="addData.intro" auto-complete="off" placeholder="请输入实验室简介"></el-input>
        </el-form-item>
        <!-- <el-form-item label="PI" prop="piUserName">
          <el-input v-model="addData.piUserName" placeholder="请输入用户账号" />
        </el-form-item> -->
        <el-form-item label="实验室详情" prop="datail">
          <el-input v-model="addData.datail" maxlength="1000" type="textarea" placeholder="请输入实验室详情" />
        </el-form-item>
        <el-form-item label="背景：">
          <el-upload
                list-type="picture-card"
                action="/img/ngUploadImg"
                :auto-upload="false"
                :on-change="importExcel"
                :on-remove="fileRemove"
                :limit="1"
                multiple
                accept=".jpg, .jpeg, .png"
                >
                <i class="el-icon-plus"></i>
          </el-upload>      
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="add()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
import { login } from '../api/login'
import { fileUpload } from '../api/file'
import { getLaboratoryList,createLaboratory } from '../api/shiyanshi'
export default {
  name: 'login',
  data() {
    return {
      addData:{
        imgList:[]
      },
      addVisible: false,
      detailVisible: false,
      //定义loading默认为false
      logining: false,
      ruleForm: {
        userName: '',
        password: ''
      },
      //rules前端验证
      rules: {
        userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      datalist: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
  },
  // 里面的函数只有调用才会执行
  methods: {
    add(){
      let user = JSON.parse(sessionStorage.getItem("sysuser"));
      this.addData.piUserName = user.userName
      createLaboratory(this.addData).then(res =>{
        if(res.status == 200){
          sessionStorage.setItem("mainId",res.data);
          setTimeout(() => {
            this.logining = false
            this.$router.push({ path: '/main/home' })
          }, 1000)
        }
      })
    },
    fileRemove(){
      this.addData.imgList = [];
    },
    importExcel(file){
      let formData = new FormData()
      formData.append('multipartFile', file.raw)
      fileUpload(formData).then(res =>{
        let img = {};
        img.img = res.data;
        this.addData.imgList = [];
        this.addData.imgList.push(img);
      })
    },
    creatshiyanshi(){
      this.detailVisible = false;
      this.addVisible = true;
    },
    closeShiyanshi(){
      this.addVisible = false;
      this.addData = {};
    },
    handleEdit(index,row){
      sessionStorage.setItem("mainId",row.id);
      setTimeout(() => {
        this.logining = false
        this.$router.push({ path: '/main/home' })
      }, 1000)
    },
    handleCurrentChange(val){
      this.pageparm.pageSize = val
      this.getData();
    },
    handleSizeChange(val){
      this.pageparm.currentPage = val
      this.getData();
    },
    closeDialog(){
      this.detailVisible = false;
    },
    //获取info列表
    submitForm(formName) {
      let _this = this;
      login(formName).then(res =>{
          if(res.flag){
            this.detailVisible = true;
            this.$store.commit("LOGIN_IN",res.Authorization)
            sessionStorage.setItem("sysuser",JSON.stringify(res.user));
            _this.getData();
          } else {
            this.$message.error(res.msg)
          }
        })
    },
    getData(){
      const pager = {};
      pager.offset = this.pageparm.currentPage;
      pager.pageSize = this.pageparm.pageSize;
      pager.type = "1";
      getLaboratoryList(pager).then(res =>{
          if(res.status = 200){
            this.datalist = res.data;
            this.pageparm.total = res.total;
          }
      })
    },
    callFather(data){
      this.pageparm = data;
      getData();
    }
  }
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url();
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}
.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin: 0px 0px 35px 0px;
}
.code-box {
  text-align: right;
}
.codeimg {
  height: 40px;
}
</style>